<template>
  <div class="searchView">
    <div class="content">
      <router-link
        :to="'/details?id=' + vl.bookId"
        class="item"
        v-for="vl in searchList"
        :key="vl.bookId"
      >
        <div class="img">
          <img :src="vl.cover" alt="" />
        </div>
        <div class="text">
          <div class="title">{{ vl.title }}</div>
          <div class="author">
            <div class="name">{{ vl.author }}</div>
          </div>
          <p class="">{{ vl.summary }}</p>
          <div class="line"></div>
        </div>
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  props: ["searchList"],
  data() {
    return {
      property: "value",
    };
  },
  created() {},
};
</script>

<style lang="scss" scoped>
.searchView {
  box-sizing: border-box;
  padding: 8px 16px 0;

  > .content {
    > .item {
      display: flex;
      width: 100%;

      > .img {
        // min-width: 70px;
        width: 70px;
        height: 95px;
        margin: 8px 0;

        > img {
          width: 100%;
          height: 100%;
        }
      }

      > .text {
        flex: 1;
        display: flex;
        flex-wrap: wrap;
        margin-top: 10px;
        margin-left: 12px;
        position: relative;
        flex-direction: column;
        justify-content: space-between;

        > .title {
          color: #333;
          font-size: 16px;
          line-height: 16px;
        }

        > p {
          color: #999;
          font-size: 12px;
          height: 40px;
          line-height: 20px;
          margin: 0px 0 10px;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        > .author {
          display: flex;
          width: 100%;
          justify-content: space-between;
          //   padding: 20px 0 12px;
          line-height: 24px;
          color: #999;
          font-size: 13px;

          > .type {
            width: 24px;
            height: 12px;
            line-height: 12px;
            padding: 4px 8px;
            background: #f5f5f5;
            border-radius: 4px;
            color: #000;
            font-size: 12px;
          }
        }

        > .line {
          position: absolute;
          bottom: 0;
          width: 100%;
          height: 1px;
          background: #e5e5e5;
          transform: scaleY(0.5);
        }
      }
    }
  }
}
</style>